<template>
  <el-header height="70px" class="navbar-header">
    <div class="navbar-container">
      <!-- Logo -->
      <div class="navbar-logo">
        <span class="logo-text">ResumeHub</span>
      </div>

      <!-- 桌面端导航 -->
      <el-menu 
        mode="horizontal" 
        :default-active="activeMenu" 
        class="navbar-menu"
        @select="handleMenuSelect"
      >
        <el-menu-item index="/" class="menu-item">主页</el-menu-item>
        <el-menu-item index="/editor" class="menu-item">编辑简历</el-menu-item>
        <el-menu-item index="/my-resumes" class="menu-item">我的简历</el-menu-item>
        <el-menu-item index="/resume-share" class="menu-item">简历分享</el-menu-item>
      </el-menu>

      <!-- 用户区域 -->
      <div class="navbar-user">
        <el-badge :value="3" class="notify-badge">
          <span class="notify-text">通知</span>
        </el-badge>
        <el-avatar :size="40" class="user-avatar">
          <img src="https://picsum.photos/id/64/40/40" alt="用户头像">
        </el-avatar>
        <el-button 
          size="small" 
          class="menu-btn md:hidden"
          @click="showMobileMenu = !showMobileMenu"
        >
          菜单
        </el-button>
      </div>
    </div>

    <!-- 移动端菜单 -->
    <el-drawer 
      v-model="showMobileMenu" 
      direction="ttb" 
      :height="220"
      class="mobile-drawer"
    >
      <el-menu 
        mode="vertical" 
        :default-active="activeMenu"
        @select="handleMenuSelect"
        class="mobile-menu"
      >
        <el-menu-item index="/" class="mobile-menu-item">主页</el-menu-item>
        <el-menu-item index="/editor" class="mobile-menu-item">编辑简历</el-menu-item>
        <el-menu-item index="/my-resumes" class="mobile-menu-item">我的简历</el-menu-item>
        <el-menu-item index="/resume-share" class="mobile-menu-item">简历分享</el-menu-item>
      </el-menu>
    </el-drawer>
  </el-header>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()
const showMobileMenu = ref(false)
const activeMenu = ref('')

onMounted(() => {
  activeMenu.value = route.path
})

const handleMenuSelect = (index) => {
  router.push(index)
  showMobileMenu.value = false
}
</script>

<style scoped>
/* 导航栏整体样式 */
.navbar-header {
  background-color: #fff !important;
  border-bottom: 1px solid #f0f0f0 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}

.navbar-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Logo 样式 */
.navbar-logo {
  display: flex;
  align-items: center;
}

.logo-text {
  font-size: 20px;
  font-weight: 700;
  color: #165dff; /* 主色调：专业蓝 */
}

/* 桌面端菜单 */
.navbar-menu {
  border: none !important;
  background: transparent !important;
}

.menu-item {
  font-size: 15px;
  padding: 0 20px !important;
  color: #666 !important;
}

/* 选中菜单样式 */
::v-deep .el-menu-item.is-active {
  color: #165dff !important;
  background-color: #e8f3ff !important;
  border-radius: 6px !important;
}

/* 用户区域 */
.navbar-user {
  display: flex;
  align-items: center;
  gap: 15px;
}

.notify-badge {
  cursor: pointer;
}

.notify-text {
  font-size: 14px;
  color: #666;
  padding: 4px 8px;
  border-radius: 4px;
  background-color: #f9f9f9;
}

.user-avatar {
  border: 2px solid #e8f3ff;
}

.menu-btn {
  border-radius: 6px !important;
  background-color: #f9f9f9 !important;
  color: #666 !important;
}

/* 移动端抽屉 */
.mobile-drawer {
  padding-top: 10px !important;
}

.mobile-menu {
  border: none !important;
  padding: 10px 20px !important;
}

.mobile-menu-item {
  font-size: 15px;
  padding: 12px 20px !important;
  color: #666 !important;
  margin-bottom: 8px !important;
  border-radius: 6px !important;
}
</style>